<template>
    <div>
        <form action="" @submit.prevent>
            <p>
                <label for="">用户名:</label>
                <input type="text" v-model="user">
            </p>
            <p>
                <label for="">密&emsp;码:</label>
                <input type="text" v-model="pwd">
            </p>
            <p>
                <input type="submit" @click="loginHandler" value="登录">
                <input type="reset" value="重置">
            </p>
        </form>
    </div>
</template>

<script>
    import {loginAPI} from "@/api/user";
    export default {
        name:"LoginView",
        data(){
            return {
                user:"",
                pwd:"",
            }
        },
        methods:{
            async loginHandler(){
                try{
                    var res = await loginAPI({
                        user:this.user,
                        pwd:this.pwd,
                    });
                    console.log("res",res);
                    if(res.status){ //登录成功
                        // 当前页面跳转其他的路由页面 
                        // this.$route    => 当前路由信息
                        // this.$router   => 路由实例 => 存放所有路由配置 (可以实现路由跳转 替换 前进 后退)
                        
                        // 页面跳转(路由跳转 / 导航跳转)
                        // 1. 声明时写法 <router-link to=""></router-link>
                        // 2. 编程式写法  通过路由实例进行跳转  router.push()   router.back()  router.go()    
                        
                        
                        // 路由实例的相关方法
                        // router.push()     跳转指定路由页面,会新增一条历史记录
                        // router.replace()  跳转指定路由页面,不会历史记录(替换原本的历史记录)
                        // router.back()     返回历史记录的前一条 => 后退一步
                        // router.go(n)      正值 => 前进n步  负值=>后退n步            

                        
                        // 如何跳转主页?
                        // 1. 基于原生JS location.href (路由可能是hash路由 / history路由 -> 路径格式不一样 -> 容器出问题)

                        // 2. 使用官方提供的编程式导航

                        // 2.1 传入路径字符串 ( 对应路由配置中path跳转)
                        // this.$router.push("/"); // 对应路由配置中path跳转

                        // 2.1 传入一个对象 {name,path,params,query}
                        // this.$router.push({path:"/"}); // 对应路由配置中path跳转
                        // this.$router.push({name:"home"}); // 对应路由配置中path跳转
                        
                        
                        // /login -> /  (push新增历史记录)
                        // this.$router.push({name:"home"}); // 对应路由配置中path跳转

                        // /login 替换为 /  (不会新增历史记录)
                        // this.$router.replace({name:"home"}); // 对应路由配置中path跳转

                        localStorage.setItem("lgc",this.user);

                        
                        var query = this.$route.query;
                        var {ReturnUrl} = query;

                        if(ReturnUrl){  // 从其他页面跳转过来
                            // 历史记录   /list ->  /detail 替换为 /login 替换为 /detail 
                            this.$router.replace(ReturnUrl);

                        }else{  // 单纯的登录功能
                            // 存储登录的用户名
                            // 去主页
                            this.$router.push("/"); // 对应路由配置中path跳转
                        }

                    }else{
                        alert(res.message)
                    }

                }catch(err){
                    console.log(err);
                }
            }
        },
        mounted(){
            console.log(this.$route);
        }
    }
</script>

<style lang="scss" scoped>

</style>